<template>
    <div class="container">
        <div class="aniCircle">
            <div class="aniCircleThree" :style="{animation:circle1}">
                <div class="aniCircleTwo" :style="{animation:circle2}">
                    <div class="aniCircleOne" :style="{animation:circle3}"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import moduleName from '../../../assets/css/animate.css'
export default {
    data(){
        return {
            circle1:"",
            circle2:"",
            circle3:""
        }
    },
    mounted(){
        window.addEventListener("scroll",this.time)
    },
    methods:{
        time(){
            this.scrollRoute = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            if(this.scrollRoute>=2012){
                this.circle1 = "circleOne 5s linear infinite alternate"
                this.circle2 = "circleOne 5s linear infinite alternate"
                this.circle3 = "circleOne 5s linear infinite alternate"
			}
        }
    }
}
</script>
<style scoped>
.aniCircle{
	position: absolute;
	z-index: 0;
	left: 150px;
	bottom: 90px;
}
.aniCircle .aniCircleOne{
	width: 384px;
	height: 384px;
	border: 1px solid #F7BABB;
	margin: 0 auto;
	margin-top: 56px;
	border-radius: 50%;
}
.aniCircle .aniCircleTwo{
	width: 504px;
	height: 504px;
	border: 1px solid #FEF2F1;
	margin: 0 auto;
	margin-top: 35px;
	border-radius: 50%;
}
.aniCircle .aniCircleThree{
	width: 586px;
	height: 586px;
	border: 1px solid #FDF3F2;
	border-radius: 50%;
}
</style>


